<template>
  <view class="history-container">
    <!-- 头部导航 -->
    <!-- <CustomHeader 
      title="历史记录"
      back-text="返回"
      @back="goBack"
    /> -->


    <!-- 历史记录列表 -->
    <view class="history-list" v-if="filteredHistoryList.length > 0">
      <view 
        class="history-item" 
        v-for="(item, index) in filteredHistoryList" 
        :key="index"
        @click="viewDetail(item)"
      >
        <!-- 问题类型和状态 -->
        <view class="item-header">
          <view class="problem-type">
            <view class="type-info">
              <text class="type-text">{{ item.feedbackType.name }}</text>
              <text class="time-text">{{ formatTime(item.created_at) }}</text>
            </view>
          </view>
        </view>

        <!-- 问题描述 -->
        <view class="item-content">
          <text class="content-text">{{ item.content }}</text>
        </view>

        <!-- 图片预览 -->
        <view class="item-images" v-if="item.images_full && item.images_full.length > 0">
          <image 
            v-for="(image, imgIndex) in item.images_full.slice(0, 3)" 
            :key="imgIndex"
            :src="image" 
            class="preview-image" 
            mode="aspectFill"
            @click.stop="previewImages(item.images_full, imgIndex)"
          ></image>
          <view class="image-count" v-if="item.images_full.length > 3">
            <text class="count-text">+{{ item.images_full.length - 3 }}</text>
          </view>
        </view>


        <!-- 回复内容 -->
        <view class="reply-section" v-if="false">
          <view class="reply-header">
            <view class="reply-avatar">
              <u-icon name="service" size="16" color="#fff"></u-icon>
            </view>
            <view class="reply-info">
              <text class="reply-title">客服回复</text>
              <text class="reply-time" v-if="item.reply_time">{{ formatTime(item.reply_time) }}</text>
            </view>
          </view>
          <view class="reply-content">
            <text class="reply-text">{{ item.reply }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-content">
        <image src="/static/personalCenter/empty-history.png" class="empty-image" mode="aspectFit"></image>
        <text class="empty-text">暂无历史记录</text>
        <text class="empty-desc">您还没有提交过反馈</text>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && filteredHistoryList.length > 0">
      <u-loadmore 
        :status="loadMoreStatus" 
        @loadmore="loadMore"
      ></u-loadmore>
    </view>

  </view>
</template>

<script>
import CustomHeader from '@/components/CustomHeader.vue'

export default {
  name: 'FeedbackHistory',
  components: {
    CustomHeader
  },
  data() {
    return {
      historyList: [],
      currentPage: 1,
      pageSize: 20,
      hasMore: true,
      loadMoreStatus: 'loadmore',
      currentDetail: null,
      currentFilter: 'all' // 新增：当前筛选状态
    }
  },
  computed: {
    // 新增：根据筛选条件过滤历史记录
    filteredHistoryList() {
      if (this.currentFilter === 'all') {
        return this.historyList
      }
      
      const statusMap = {
        'pending': 0,
        'processing': 1,
        'completed': 2
      }
      
      return this.historyList.filter(item => item.status === statusMap[this.currentFilter])
    }
  },
  onLoad() {
    this.loadHistory()
  },
  onPullDownRefresh() {
    this.refreshHistory()
  },
  onReachBottom() {
    if (this.hasMore) {
      this.loadMore()
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    // 加载历史记录
    async loadHistory() {
      try {
        const params = {
          page: this.currentPage,
          page_size: this.pageSize
        }
        const res = await this.$http.get('/h5/user/feedback/myFeedback', params)
        console.log(res, '历史记录');
        if (this.currentPage === 1) {
          this.historyList = res.data.list || []
        } else {
          this.historyList = [...this.historyList, ...(res.data.list || [])]
        }
        
        this.hasMore = res.data.list && res.data.list.length === this.pageSize
        this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore'
        
      } catch (error) {
        console.error('加载历史记录失败:', error)
        this.loadMoreStatus = 'loadmore'
      }
    },

    // 刷新历史记录
    async refreshHistory() {
      this.currentPage = 1
      this.hasMore = true
      await this.loadHistory()
      uni.stopPullDownRefresh()
    },

    // 加载更多
    async loadMore() {
      if (!this.hasMore) return
      
      this.loadMoreStatus = 'loading'
      this.currentPage++
      await this.loadHistory()
    },

    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        0: 'status-pending',
        1: 'status-processing', 
        2: 'status-completed',
        3: 'status-rejected'
      }
      return statusMap[status] || 'status-pending'
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待处理',
        1: '处理中',
        2: '已完成', 
        3: '已拒绝'
      }
      return statusMap[status] || '待处理'
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      
      // 小于1分钟
      if (diff < 60000) {
        return '刚刚'
      }
      // 小于1小时
      if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前'
      }
      // 小于24小时
      if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前'
      }
      // 小于30天
      if (diff < 2592000000) {
        return Math.floor(diff / 86400000) + '天前'
      }
      
      // 超过30天显示具体日期
      return date.getFullYear() + '-' + 
             String(date.getMonth() + 1).padStart(2, '0') + '-' + 
             String(date.getDate()).padStart(2, '0')
    },

    // 预览图片
    previewImages(images, current) {
      uni.previewImage({
        current: current,
        urls: images
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.history-container {
  min-height: 100vh;
  background-color: #f8f9fa;
}

// 新增：筛选栏样式
.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .filter-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    border-radius: 20rpx;
    transition: all 0.3s ease;
    
    .filter-text {
      font-size: 28rpx;
      color: #666;
    }
    
    &.active {
      background-color: #007aff;
      
      .filter-text {
        color: #fff;
        font-weight: bold;
      }
    }
  }
}

.history-list {
  padding: 20rpx 26rpx;
}

.history-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
  
  .problem-type {
    display: flex;
    align-items: flex-start;
    flex: 1;
    
    .type-icon {
      width: 48rpx;
      height: 48rpx;
      background-color: #f0f8ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
    }
    
    .type-info {
      flex: 1;
      display: flex;
      align-items: center;
      
      .type-text {
        font-size: 32rpx;
        font-weight: bold;
        color: #FF7937;
        display: flex;
        align-items: center;
        
        &::before {
          content: '';
          display: block;
          width: 10rpx;
          height: 30rpx;
          background-color: #FF7937;
          margin-right: 16rpx;
        }
      }
      
      .time-text {
        font-size: 24rpx;
        color: #999;
        padding-left: 26rpx;
      }
    }
  }
  
  .status-badge {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    margin-left: 16rpx;
    
    &.status-pending {
      background-color: #fff3cd;
      .status-text {
        color: #856404;
      }
    }
    
    &.status-processing {
      background-color: #d1ecf1;
      .status-text {
        color: #0c5460;
      }
    }
    
    &.status-completed {
      background-color: #d4edda;
      .status-text {
        color: #155724;
      }
    }
    
    &.status-rejected {
      background-color: #f8d7da;
      .status-text {
        color: #721c24;
      }
    }
  }
}

.item-content {
  margin-bottom: 24rpx;
  
  .content-text {
    font-size: 28rpx;
    color: #666;
    // line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

.item-images {
  display: flex;
  gap: 12rpx;
  position: relative;
  
  .preview-image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
  .image-count {
    width: 140rpx;
    height: 140rpx;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .count-text {
      color: #fff;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}

// 新增：操作按钮样式优化
.item-actions {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
  
  .action-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 20rpx;
    border-radius: 24rpx;
    background-color: #f8f9fa;
    border: 1rpx solid #e9ecef;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #e9ecef;
    }
    
    .btn-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.reply-section {
  margin-top: 24rpx;
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 16rpx;
  border-left: 4rpx solid #007aff;
  
  .reply-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    
    .reply-avatar {
      width: 40rpx;
      height: 40rpx;
      background-color: #007aff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12rpx;
    }
    
    .reply-info {
      flex: 1;
      
      .reply-title {
        font-size: 26rpx;
        color: #007aff;
        font-weight: bold;
        display: block;
        margin-bottom: 4rpx;
      }
      
      .reply-time {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
  
  .reply-content {
    .reply-text {
      font-size: 26rpx;
      color: #333;
      line-height: 1.6;
    }
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500rpx;
  
  .empty-content {
    text-align: center;
    
    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 24rpx;
      opacity: 0.6;
    }
    
    .empty-text {
      font-size: 32rpx;
      color: #999;
      display: block;
      margin-bottom: 12rpx;
    }
    
    .empty-desc {
      font-size: 26rpx;
      color: #ccc;
    }
  }
}

.load-more {
  padding: 20rpx;
}

.detail-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  overflow-y: auto;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      padding: 10rpx;
    }
  }
  
  .popup-content {
    padding: 30rpx;
    
    .detail-section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .section-content {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
      }
      
      .detail-images {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        
        .detail-image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
}
</style> 